<template>
  <div>
    <Modal :mask-closable="false"
        v-model="helpShowF"
        :title="addtitle"
        class="modal-content-item-layout"
        width="1300"

    >
      <div class="content-item pd16">
        <span class="content-item-title">{{$t('注释')}}</span>
        <p class="pd16 item-desc" >
          {{descObj[params.type]}}
        </p>
      </div>
      <div class="content-item pd16"  v-if="helpShowF">
        <vo-basic :pan="true" :verticalLevel="1" exportFilename="111.png" nodeContent="nodeContent" :createNode="createNode" class="orgchartStyle round" :data="chartData" :toggleSiblingsResp="false">
        </vo-basic>
      </div>
      <div slot="footer">
        <Button type="primary"  @click="helpShowF=false">{{$t('maintenance.Confirmed')}}</Button>
      </div>
    </Modal>
    <Modal :mask-closable="false"
        v-model="deviceInfoShow"
        :title="addtitle"
        class="modal-content-item-layout"
        width="1300">
      <Table
          ref="selection"
          row-key="id"
          :columns="columns"
          :data="dataSource"
      />
    </Modal>
  </div>
</template>

<script>
import { VoBasic } from 'vue-orgchart'
import moment from 'moment'
export default {
  name: "oeeHelpOrgChart",
  components:{VoBasic},
  data(){
    return {
      chartData : {},
      helpShowF:false,
      addtitle:"",
      sourceValue:"p",
      params:{},
      deviceInfoShow:false,
      columns:[
        {
          title: 'cycleCount',
          key: 'cycleCount',
          align: 'center',
        },
        {
          title: 'ideaDuration',
          key: 'ideaDuration',
          align: 'center',
        },
        {
          title: 'duration',
          key: 'duration',
          align: 'center',
        },
        {
          title: 'spt',
          key: 'spt',
          align: 'center',
        },
        {
          title: 'pot',
          key: 'pot',
          align: 'center',
        },
      ],
      dataSource:[],
      titleObj:{
        a:this.$t("时间开动率1"),
        u:this.$t("使用率1"),
        p:this.$t("性能开动率1"),
        q:this.$t("合格品率1")
      },
      descObj:{
        a:this.$t("时间开动率描述"),
        u:this.$t("使用率描述"),
        p:this.$t("性能开动率描述"),
        q:this.$t("合格品率描述")
      }
    }
  },
  mounted() {

  },
  methods:{
    show(params){
      this.chartData = {}
      this.params  = params
      this.addtitle = this.titleObj[params.type]
      this.helpShowF = true
      this.getList()
    },
    removeDialog(e){
      if (document.getElementById('kpiDialog'))
        document.getElementById('kpiDialog').remove()
    },
    createNode($node, data){
      const {level,cycleCount,ideaDuration,duration,spt,pot,deviceId,nodeContent }  = data;
      $node.setAttribute('class','node level'+level)
      if (deviceId)
      {
        let dialog = document.createElement('div')
        dialog.setAttribute('id','kpiDialog')
        dialog.setAttribute('class','dialog tableContent')
         dialog.innerHTML = `
                     <div class="dialog-content">
                        <p>${nodeContent}</p>
                        <span id="dialogClose"><i class="iconfont zy-common-guanbi close"></i></span>
                       <table>
                        <tr>
                            <th>cycleCount</th>
                            <th>ideaDuration</th>
                            <th>duration</th>
                            <th>spt</th>
                            <th>pot</th>
                        </tr>
                         <tr>
                            <td>${cycleCount}</td>
                            <td>${ideaDuration}</td>
                            <td>${duration}</td>
                            <td>${spt}</td>
                            <td>${pot}</td>
                        </tr>
                       </table>
                     </div>
                     `
        $node.onclick =  ()=>{
          if (document.getElementById('kpiDialog')){
            document.getElementById('dialogClose').removeEventListener('click',(e)=>{
              e.stopPropagation();
              this.removeDialog();
            },false)
          }
          this.removeDialog()
          $node.appendChild(dialog)
          document.getElementById('dialogClose').addEventListener('click',(e)=>{
            e.stopPropagation();
            this.removeDialog();
          },false)
        }
      }
    },
    formatData(list,level){
      for (let i=0; i<list.length; i++){
        const {groupName,deviceName,children,cycleCount, ideaDuration, duration, spt, pot,deviceId} = list[i]
        list[i] = {
          name: list[i][this.params.type]+'%',
          nodeContent: (groupName && groupName!==null)  ? groupName : deviceName,
          children,
          level,
          cycleCount,
          ideaDuration,
          duration,
          spt,
          pot,
          deviceId

        }
        if (children.length > 0){
          this.formatData(children,level+1)
        }
      }
    },
    getList(){
      const {orgCode,assetsNo,deviceMId,deviceNo,shift,day,startDate,endDate} = this.params
      let params = Object.assign({},{
        hierarchyCode : orgCode,
        assetsNo,deviceMId,deviceNo,shift,startDate: moment(startDate).format('YYYY')+'-' +day,endDate:moment(endDate).format('YYYY')+'-' +day
      })
       this.axios({
        method: 'post',
        url: '/dms/performanceKPIReport/queryData',
        data: params
      }).then(res => {
        if (res.code == 200) {
          let data = res.data;
          let list = data ? [data]:[]
          this.formatData( list,1)
          this.chartData = list[0]
          console.log(this.chartData)
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
